<script setup>

</script>

<!--  商品列表页(上中下三部分中： 的中间部分显示了8个商品列表)  http://localhost:9090/list  -->
<template>
  <!--  为了让el-row缩放的时候宽度不变(只改变高度)。就将el-row放到一个div中并设置div居中  -->
  <div style="width: 1200px; margin: 0 auto">
    <el-row gutter="20">
      <el-col :span="6" v-for="item in contentArr" :key="item.id" style="margin: 10px  0">
        <el-card>
          <a href="javascript:void(0)" @click="detail(item.id)"  style="text-decoration: none;color: black">
            <img :src="item.imgUrl" width="100%" height="145"/>
            <!--<img :src="BASE_URL+item.imgUrl" width="100%" height="145"/>-->
            <p style="height:40px">{{item.title}}</p>
          </a>
          <el-row>
            <el-col :span="4">
              <!--<el-avatar :src="BASE_URL+item.userImgUrl" size="small"/>-->
              <el-avatar :src="item.userImgUrl" size="small"/>
            </el-col>
            <el-col :span="10">{{item.nickName}}</el-col>
            <el-col :span="10" style="float: right">{{item.categoryName}}</el-col>
          </el-row>
        </el-card>
      </el-col>
    </el-row>
    <div style="text-align: center">
      <el-button>点击加载更多</el-button>
    </div>
  </div>
</template>
<script>
export  default {
  name: "ListView",
  data(){
    return {
      contentArr: [
        {
          id: 13,
          title: "家常面包",
          imgUrl: "/imgs/a.jpg",
          categoryName: "面包",
          nickName: "汤姆",
          userImgUrl: "imgs/head.jpg"
        },
        {
          id: 14,
          title: "爆浆抹茶甜甜圈面板，自带幸福感的小甜甜",
          imgUrl: "/imgs/b.jpg",
          categoryName: "家常菜",
          nickName: "汤姆",
          userImgUrl: "imgs/head.jpg"
        },
        {
          id: 15,
          title: "开心火龙果椰蓉面包任谁都抵挡不了",
          imgUrl: "/imgs/c.jpg",
          categoryName: "小食",
          nickName: "汤姆",
          userImgUrl: "imgs/head.jpg"
        },
        {
          id: 16,
          title: "蔓越莓绿豆蛋糕，味道还不错，值得一试",
          imgUrl: "/imgs/d.jpg",
          categoryName: "面包",
          nickName: "汤姆",
          userImgUrl: "imgs/head.jpg"
        },
        {
          id: 17,
          title: "蔓越莓绿豆蛋糕，味道还不错，值得一试",
          imgUrl: "/imgs/d.jpg",
          categoryName: "面包",
          nickName: "汤姆",
          userImgUrl: "imgs/head.jpg"
        },
        {
          id: 18,
          title: "蔓越莓绿豆蛋糕，味道还不错，值得一试",
          imgUrl: "/imgs/d.jpg",
          categoryName: "面包",
          nickName: "汤姆",
          userImgUrl: "imgs/head.jpg"
        },
        {
          id: 19,
          title: "蔓越莓绿豆蛋糕，味道还不错，值得一试",
          imgUrl: "/imgs/d.jpg",
          categoryName: "面包",
          nickName: "汤姆",
          userImgUrl: "imgs/head.jpg"
        },
        {
          id: 20,
          title: "蔓越莓绿豆蛋糕，味道还不错，值得一试",
          imgUrl: "/imgs/d.jpg",
          categoryName: "面包",
          nickName: "汤姆",
          userImgUrl: "imgs/head.jpg"
        }
      ]
    }
  }
}
</script>
<style scoped>

</style>